{% extends 'base.html' %}


{% block content %}
    <h3 class="text-center">修改头像</h3>
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <p>
            原头像：
            <img src="/media/{{ request.user.avatar }}" alt="">
        </p>
        <p>
            <label for="myfile">新头像
                {% load static %}
                <img src="{% static 'img/default.jpg' %}" id="myimg" alt="" width="100" style="margin-left: 10px">
            </label>
            <!--下面的input框使用内置style来隐藏-->
            <input type="file" id="myfile" name="avatar" style="display:none">
        </p>
        <input type="submit" class="btn btn-info">
    </form>

{% endblock %}

{% block js %}
    <script>
        $("#myfile").change(function () {
            // 文件阅读器对象
            // 1 先生成一个文件阅读器对象
            let myFileReadObj = new FileReader();
            // 2 获取用户上传的头像文件
            let fileObj = $(this)[0].files[0]
            // 3 将文件对象交给阅读器对象读取
            myFileReadObj.readAsDataURL(fileObj)  // 异步操作  IO操作
            // 4 利用文件阅读器将文件展示到前端页面 修改src属性
            // 等待文件阅读器加载完毕之后在执行
            myFileReadObj.onload = function () {
                $('#myimg').attr('src', myFileReadObj.result)
            }
        })
    </script>
{% endblock %}
